<template>
	<rx-layout>
		<template #middle>
			<div class="instrument-list" @click="onClick(item.pkId)" v-for="item in screens" :key="item.pkId">
				<rx-icon-show icon="icon-colords-tubiao"></rx-icon-show>
				<div class="instrument-list-name">{{ $i18(item.name) }}</div>
			</div>
		</template>
	</rx-layout>
</template>

<script>
import {RxLayout} from '@lowcode/jpaas-base-lib';
import screenPermissionApi from '@/api/screen/core/screen-permission.js'
import ScreenViewManageApi from '@/api/screen/core/screen-view-manage'
export default {
	name: 'ScreenShareList',
    components:{
        RxLayout
    },
	props: {
		selectView: {},
        appId: {},
		largeList:{
			type:Array,
			default:()=>[]
		},
	},
	data() {
		return {
			screens:[]
		}
	},
	created(){
		this.getShareWithMe();
	},
	methods: {
		getShareWithMe(){
			screenPermissionApi.getShareWithMe(this.appId).then(res=>{
				this.screens=res.data || [];
			});
		},
		onClick(pkId) {
			let selectView=this.largeList.find(item=>item.pkId==pkId);
			if(!selectView){
                ScreenViewManageApi.get(pkId).then(res=>{
                    this.$emit('screenTree', res.data ? res.data : {});
                });
            }else {
                this.$emit('screenTree', selectView);
            }
		},
	}
}
</script>
<style scoped>
.table-operator {
	padding: 4px;
}

.table-operator button {
	margin: 2px;
}
.instrument-list {
	display: flex;
	height: 40px;
	align-items: center;
	line-height: 40px;
	padding: 0px 10px;
	cursor: pointer;
}

.instrument-list:hover {
	background-color: #eff5ff;
	color: #4285f4;
}

.instrument-list-hover {
	background-color: #eff5ff;
	color: #4285f4;
}

.instrument-list i {
	font-size: 20px;
	margin-right: 5px;
}

.instrument-list-name {
	flex: 1;
	font-size: 14px;
	color: #666666;
	overflow: hidden;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

